<template>
  <el-menu-item
    :index="menu.id + ''"
    :route="theRoute"
    v-if="menu.menuType === 'Menu'"
  >
    <div class="left_line" :style="left_line_style" v-if="showLeftLine"></div>

    <el-badge
      :value="menu.count"
      class="menu_badge_coll"
      type="danger"
      style="float: right"
      v-if="isCollapse"
    >
      <i :style="iconStyle" :class="menu.icon"></i>
    </el-badge>
    <i :style="iconStyle" v-else :class="menu.icon"></i>
    <el-badge
      :value="menu.count"
      class="menu_badge"
      type="danger"
      style="float: right"
      v-if="menu.count > 0 && !isCollapse"
    >
    </el-badge>
    <span slot="title" :style="subItemTitleStyle">{{ menu.menuName }}</span>
  </el-menu-item>

  <el-submenu :index="menu.id + ''" v-else-if="menu.menuType === 'Catalogue'">
    <template slot="title">
      <el-badge
        :value="menu.count"
        class="menu_badge_coll"
        type="danger"
        style="float: right"
        v-if="isCollapse"
      >
        <i :style="iconStyle" :class="menu.icon"></i>
      </el-badge>
      <i :style="iconStyle" v-else :class="menu.icon"></i>

      <el-badge
        :value="menu.count"
        class="menu_badge"
        type="danger"
        style="float: right;margin-right: 25px;"
        v-if="menu.count > 0 && !isCollapse"
      >
      </el-badge>
      <span slot="title" :style="subTitleStyle">{{ menu.menuName }}</span>
    </template>
    <sub-menu
      :menu="sub"
      v-for="sub in menu.children"
      :key="sub.id"
      :iconStyle="iconStyle"
      :subTitleStyle="subTitleStyle"
      :subItemTitleStyle="subItemTitleStyle"
    ></sub-menu>
  </el-submenu>
</template>
<script>
import { mapGetters } from "vuex";
export default {
  name: "subMenu",
  props: {
    menu: Object,
    currentIndex: {
      type: String,
      default: "1"
    },
    subItemTitleStyle: {
      type: String,
      default: "font-size: 16x;"
    },
    iconStyle: {
      type: String,
      default: "font-size: 16px;"
    },
    isCollapse: {
      type: Boolean,
      default: false
    },
    subTitleStyle: {
      type: String,
      default: "font-size: 16px;"
    }
  },
  created() {},
  updated() {},
  data() {
    return {};
  },
  computed: {
    ...mapGetters({
      curLeftMenuIndex: "curLeftMenuIndex"
    }),
    theRoute() {
      if (this.menu.route) {
        // console.log("this.menu.route", this.menu.route);
        return JSON.parse(this.menu.route);
      }
    },

    showLeftLine() {
      if (this.curLeftMenuIndex === this.menu.id + "") {
        return true;
      } else {
        return false;
      }
    },
    left_line_style() {
      let deep = this.menu.level ? this.menu.level : 1;
      console.log(deep);
      let marginLeftPx = 20 * (Number.parseInt(deep) - 1);
      return "margin-left:-" + marginLeftPx + "px";
    }
  },
  methods: {
    sendMessage(menu) {
      console.log(menu);
    }
  },
  components: {}
};
</script>
<style scoped lang="scss">
@import "../../styles/vars";
.icon-style {
  margin-right: 15px;
  font-size: 18px;
}
.left_line {
  height: 100%;
  width: 4px;
  background-color: #0075ff;
  float: left;
  margin-left: -20px;
}
.menu_badge_coll {
  /deep/ .el-badge__content {
    background-color: #f22e2b !important;
    border: none;
    top: 14px;
  }
}
.menu_badge {
  /deep/.el-badge__content {
    border: none;
    background-color: #f22e2b !important;
  }
}
</style>
